<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../css/mui.plus.css" rel="stylesheet"/>
    <!--<link rel="stylesheet" href="../../css/gy.css" />-->
</head>
<body>
	<header class="mui-bar mui-bar-nav pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">骨科资讯</h1>
	</header>
	<div class="mui-content mui-scroll-wrapper home" id="refreshContainer" >
		<div class="mui-scroll">
			<div id="slider" class="mui-slider" >
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/banner/3.png">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/banner/1.png">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../images/banner/3.png">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../images/banner/1.png">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			
			<div class="oe-title-line">
				骨科资讯
			</div>
			
			<ul class="mui-table-view common-img-text-list mui-table-view-chevron oe-media1" id="list_wrap">
				<!--<li class="mui-table-view-cell mui-media ">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../../images/1.png">
						<div class="mui-media-body">
							颈椎痛怎么办，简单妙招让你
							<p>在日常生活中 ,很多人都会有颈椎痛的烦恼,尤其现在工作压力大</p>
						</div>
						<div class="common-support-bar">
							<div class="support-bar">
								<span class="mui-icon mui-icon-flag"></span>
								<span class="support-num">290</span>
								<span class="mui-icon mui-icon-chatbubble"></span>
								<span class="discuss-num">124</span>
							</div>
						</div>
					</a>
				</li>-->
			</ul>
		</div>
	</div>
	<!--<script src="../../js/require.js" data-main="../../js/config.js"></script>-->
	<script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
	<script type="text/javascript" charset="utf-8">
      	(function($, doc){
      		//页面初始化，传入相关参数
			$.init({
				pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down: {
			    	contentdown : '下拉可以刷新',
			    	contentover : '释放立即刷新',
			    	contentrefresh : '正在刷新...',
					callback: pulldownRefresh
				},
				up: {
					height:50,//可选.默认50.触发上拉加载拖动距离
					auto:false,//可选,默认false.自动上拉加载一次
					contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
					callback : pullUpRefresh 
				}
			  }
      		});
      		
      		function pulldownRefresh(){
            	setTimeout(function(){
            		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
            		$.plusReady(function(){
            			plus.nativeUI.toast('刷新成功');
            		});
            	},1000);
            }
      		
      		function pullUpRefresh(){
            	setTimeout(function(){
            		mui('#refreshContainer').pullRefresh().endPullupToRefresh();
            	},1000);
            }
			
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
			});
			
      		var page = app.page;
      		//底层支持准备完毕
      		$.plusReady(function(){
				plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
				
				var	listWrap = document.querySelector('#list_wrap'),
					arr, arrHTML = [];
				var nextPage = $.preload({
					id : 'next',
	  				url : 'info/detail-sub.html'
	  			});
				page.getMain({}, function(data){
					arr = data;
//					console.log(arr.length)
					for (var i = 0; i<arr.length; i++){
						arrHTML.push('<li class="mui-table-view-cell mui-media"><a href="javascript:;" data-newid="'+ arr[i].news_id +'">'+
								'<img class="mui-media-object mui-pull-left" src="'+ arr[i].news_first_img +'">'+
								'<div class="mui-media-body">'+ arr[i].news_title +'<p>'+ arr[i].news_intro +'</p>'+
								'</div><div class="oe-spt"><div class="oe-spt-bar">'+
								'<span class="mui-icon mui-icon-flag"></span>'+
								'<span class="oe-spt-num">'+ arr[i].news_collect_num +'</span>'+
								'<span class="mui-icon mui-icon-chatbubble"></span>'+
								'<span class="oe-disc-num">'+ arr[i].news_comm_num +'</span></div></div></a></li>');
					}
					listWrap.innerHTML = arrHTML.join('');
					var aLi = listWrap.children;
					for(var y=0;y<aLi.length;y++){
						(function(i){
							aLi[i].children[0].addEventListener('tap', function(event){
								var newsId = this.dataset.newid;
								//打开详情页面
							  	$.openWindow({
							  		url: 'detail-sub.html',
							  		waiting: {
      									autoShow: false
      								},
      								extras: {
      									newsid: newsId
      								}
							  	});
							}, false);
						})(y);
					}
				});
      		});
      	}(mui, document));
    </script>
</body>
</html>